<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>DStation后台管理</title>
    <!-- Bootstrap Core CSS -->
    <link th:href="@{/boostrapTemplatResources/vendor/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <!-- MetisMenu CSS -->
    <link th:href="@{/boostrapTemplatResources/vendor/metisMenu/metisMenu.min.css}" rel="stylesheet">
    <!-- Custom CSS -->
    <link th:href="@{/boostrapTemplatResources/dist/css/sb-admin-2.css}" rel="stylesheet">
    <!-- Morris Charts CSS -->
    <link th:href="@{/boostrapTemplatResources/vendor/morrisjs/morris.css}" rel="stylesheet">
    <!-- Custom Fonts -->
    <link th:href="@{/boostrapTemplatResources/vendor/font-awesome/css/font-awesome.min.css}" rel="stylesheet"
          type="text/css">
    <!-- boostrap table -->
    <link th:href="@{/boostrap_table/css/bootstrap-table.min.css}" rel="stylesheet">
    <link th:href="@{/boostrap_table/css/jquery.treegrid.min.css}" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/css/adminLoginCss/font-awesome.min.css}">
</head>

<body>

<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
    <div th:include="admin/header :: header"></div>
    <div th:include="admin/sidebar :: sidebar"></div>
</nav>

<div id="wrapper">
    <!-- 主界面显示D站介绍信息 -->
    <div id="page-wrapper">
        <!-- 存放视频的分类信息的table -->
        <br/>
        <button class="btn btn-success" id="addButton">添加订阅套餐</button>
        <br/>
        <br/>
        <table id="table" class="table table-bordered">
            <thead>
            <tr>
                <th>编号</th>
                <th>类型</th>
                <th>硬币数（个）/可观看次数（次）</th>
                <th>价格</th>
                <th>创建日期</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="subscriptionPackage : ${subscriptionPackageList}">
                <td th:text="${subscriptionPackage.subPackId}"></td>
                <div th:switch="${subscriptionPackage.subPackType}">
                    <td th:case="0">硬币</td>
                    <td th:case="1">可观看次数</td>
                </div>
                <div th:switch="${subscriptionPackage.subPackType}">
                    <td th:case="0" th:text="${subscriptionPackage.subPackDescription + '  个'}"></td>
                    <td th:case="1" th:text="${subscriptionPackage.subPackDescription + '  次'}">可观看次数</td>
                </div>
                <td th:text="${subscriptionPackage.subPackPrice + '  元'}"></td>
                <td th:text="${subscriptionPackage.createDate}"></td>
                <td><a class="btn btn-primary btn-xs"
                       th:onclick="editInfo([[${subscriptionPackage.subPackId}]],[[${subscriptionPackage.subPackType}]],[[${subscriptionPackage.subPackDescription}]],[[${subscriptionPackage.subPackPrice}]])">修改</a>
                    <a class="btn btn-danger btn-xs" th:onclick="deleteInfo([[${subscriptionPackage.subPackId}]])">删除</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->

<!-- 修改模态框 -->
<div class="modal fade" id="updateModel" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">订阅套餐修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <input id="updateSubPackId" type="text" hidden="hidden">
                        <label class="col-sm-4 control-label">类型</label>
                        <div class="col-sm-8">
                            <label class="radio-inline">
                                <input type="radio" name="updateSubPackType" value="0" checked disabled>
                                硬币
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="updateSubPackType" value="1" disabled> 可观看次数
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">订阅套餐内容</label>
                        <div class="col-sm-8">
                            <input class="form-control" id="updateSubPackDescription" required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">价格</label>
                        <div class="col-sm-8">
                            <input class="form-control" id="updateSubPackPrice" required/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="updateConfirmButton"> 确认</button>
            </div>
        </div>
    </div>
</div>

<!-- 增加模态框 -->
<div class="modal fade" id="addModel" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">订阅套餐增加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">类型</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="addSubPackType" id="optionsRadios3" value="0">
                                硬币
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="addSubPackType" id="optionsRadios4" value="1"> 可观看次数
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">套餐内容</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="addSubPackDescription" required
                                   placeholder="硬币数（个）/可观看次数（次）"
                                   onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                                   onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                                   max="9999"
                            />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">价格</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="addSubPackPrice" required/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="addConfirmButton">确认</button>
            </div>
        </div>
    </div>
</div>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<script th:src="@{/boostrapTemplatResources/js/html5shiv.js}"></script>
<script th:src="@{/boostrapTemplatResources/js/respond.min.js}"></script>

<!-- jQuery -->
<script th:src="@{/boostrapTemplatResources/vendor/jquery/jquery.min.js}"></script>

<!-- Bootstrap Core JavaScript -->
<script th:src="@{/boostrapTemplatResources/vendor/bootstrap/js/bootstrap.min.js}"></script>

<!-- Metis Menu Plugin JavaScript -->
<script th:src="@{/boostrapTemplatResources/vendor/metisMenu/metisMenu.min.js}"></script>

<!-- Morris Charts JavaScript -->
<script th:src="@{/boostrapTemplatResources/vendor/raphael/raphael.min.js}"></script>
<script th:src="@{/boostrapTemplatResources/vendor/morrisjs/morris.min.js}"></script>
<script th:src="@{/boostrapTemplatResources/data/morris-data.js}"></script>

<!-- Custom Theme JavaScript -->
<script th:src="@{/boostrapTemplatResources/dist/js/sb-admin-2.js}"></script>

<!-- boostrap table -->
<script th:src="@{/boostrap_table/js/bootstrap-table.min.js}"></script>
<script th:src="@{/boostrap_table/js/bootstrap-table-treegrid.js}"></script>
<script th:src="@{/boostrap_table/js/jquery.treegrid.min.js}"></script>

<!-- swal alert -->
<script th:src="@{/js/sweetAlert.js}"></script>
<script>
    /**
     * 删除一条信息
     */
    function deleteInfo(id) {
        swal({
            title: "确认弹框",
            text: "确定要删除这个订阅套餐吗?",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((flag) => {
            if (flag) {
                $.ajax(
                    {
                        type: "POST",
                        url: "/subscriptionPackage/removeSubscriptionPackage",
                        async: false,
                        cache: true,
                        data: {
                            "subPackId": id
                        },
                        success: function (data) {
                            if (data["removeResult"] == true) {
                                swal("删除成功!", {
                                    buttons: false,
                                    timer: 1000
                                });
                                window.location.reload();
                            } else {
                                swal("Error", "删除失败！", "error");
                            }
                        },
                        error: function (data) {
                            swal("Error", "网络错误，请联系管理员！", "error");
                        }
                    }
                );
            }
        });
    }

    /**
     * 修改订阅套餐
     * @param id
     */
    function editInfo(updateSubPackId,subPackType, subPackDescription, subPackPrice) {
        $("#updateSubPackId").val(updateSubPackId);
        //填充模态框的数据
        if (subPackType == "0") {
            $("input[name='updateSubPackType']").get(0).checked = true;
        } else if (subPackType == "1") {
            $("input[name='updateSubPackType']").get(1).checked = true;
        }
        $("#updateSubPackDescription").val(subPackDescription);
        $("#updateSubPackPrice").val(subPackPrice);
        $("#updateModel").modal("show");
    }
     $("#updateConfirmButton").click(function(){
        var updateSubPackId = $("#updateSubPackId").val();
        var updateSubPackTypeTxt = $("input[name='updateSubPackType']:checked").val();
        var updateSubPackDescriptionTxt = $("#updateSubPackDescription").val();
        var updateSubPackPriceTxt = $("#updateSubPackPrice").val();
        //格式判断
        var updateSubPackDescriptionReg = /^[1-9][0-9]{1,3}$/;
        var updateSubPackPriceReg = /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/;
        if (updateSubPackDescriptionReg.test(updateSubPackDescriptionTxt) === false || updateSubPackDescriptionTxt === null || updateSubPackDescriptionTxt === "") {
            swal("警告", "套餐内容必须为1-9999位正整数！", "error");
            return;
        } else if (updateSubPackPriceReg.test(updateSubPackPriceTxt) === false || updateSubPackPriceTxt === null || updateSubPackPriceTxt === "") {
            swal("警告", "价格只能为大于0的2位小数的数值", "error");
            return;
        } else if (parseFloat(updateSubPackPriceTxt) > 9999.99) {
            swal("警告", "价格的数值只能在0至9999.99之间", "error");
            return;
        }
        $.ajax(
            {
                type: "POST",
                url: "/subscriptionPackage/modifySubscriptionPackage",
                async: false,
                cache: true,
                data: {
                    "subPackId":updateSubPackId,
                    "subPackType": updateSubPackTypeTxt,
                    "subPackPrice": updateSubPackPriceTxt,
                    "subPackDescription": updateSubPackDescriptionTxt
                },
                success: function (data) {
                    if (data["modifyResult"] == true) {
                        swal("修改成功!", {
                            buttons: false,
                            timer: 2000
                        });
                        window.location.reload();
                    } else {
                        swal("警告", "修改失败！", "error");
                    }
                },
                error: function (data) {
                    swal("Error", "网络错误，请联系管理员！", "error");
                }
            }
        );
    });



    $("#addButton").click(function () {
        //1. 清除以前的内容
        $("#addSubPackDescription").val("");
        $("#addSubPackPrice").val("");
        //2. 显示模态框
        $("#addModel").modal("show");
    });

    $("#addConfirmButton").click(
        function () {
            var addSubPackDescriptionTxt = $("#addSubPackDescription").val();
            var addSubPackPriceTxt = $("#addSubPackPrice").val();
            var addSubPackType = $("input[name='addSubPackType']:checked").val();
            //格式判断
            var addSubPackDescriptionReg = /^[1-9][0-9]{1,3}$/;   //1到9999的正整数
            var addSubPackPriceReg = /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/;   // 价格为2位小数
            if (addSubPackDescriptionReg.test(addSubPackDescriptionTxt) === false || addSubPackDescriptionTxt === null || addSubPackDescriptionTxt === "") {
                swal("警告", "套餐内容必须为1-9999位正整数！", "error");
                return;
            } else if (addSubPackPriceReg.test(addSubPackPriceTxt) === false || addSubPackPriceTxt === null || addSubPackPriceTxt === "") {
                swal("警告", "价格只能为大于0的2位小数的数值", "error");
                return;
            } else if (parseFloat(addSubPackPriceTxt) > 9999.99) {
                swal("警告", "价格的数值只能在0至9999.99之间", "error");
                return;
            }
            $.ajax(
                {
                    type: "POST",
                    url: "/subscriptionPackage/saveSubscriptionPackage",
                    async: false,
                    cache: true,
                    data: {
                        "subPackPrice": addSubPackPriceTxt,
                        "subPackDescription": addSubPackDescriptionTxt,
                        "subPackType": addSubPackType
                    },
                    success: function (data) {
                        if (data["saveResult"] == true) {
                            swal("添加成功!", {
                                buttons: false,
                                timer: 1000
                            });
                            window.location.reload();
                        } else {
                            swal("Error", "添加失败！", "error");
                        }
                    },
                    error: function (data) {
                        swal("Error", "网络错误，请联系管理员！", "error");
                    }
                }
            );
        }
    );
</script>
</body>
</html>
